<template>
	<div class="base-content" key="ReqTool">
		<el-form :model="form">
			<el-form-item label="请求地址">
				<el-input v-model="form.url">
					<template v-slot:prepend>
						<el-select v-model="form.method" placeholder="请选择" style="min-width: 100px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
					<template v-slot:append>
						<el-button type="primary" @click="req" size="medium"><i class="iconfont">&#xe9cf;</i>请求
						</el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-tabs v-model="curTab">
				<el-tab-pane label="header配置" name="header">
					<el-card class="box-card" shadow="hover">
						<template v-slot:header>
							<div class="clearfix card-title">
								<span>header配置</span>
								<div style="flex:1;"></div>
								<el-button style="float: right; padding: 3px 0" type="text" @click="addRow('header')">
									添加一行
								</el-button>
							</div>
						</template>
						<el-row :gutter="20" v-for="(item,index) in form.header" :key="index">
							<el-col :span="6">
								<el-form-item :label-width="0">
									<template v-slot:label>
										<i class="iconfont remove-btn" @click="removeRow('header', index)">&#xe788;</i>
									</template>
									<el-input v-model="item.key"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="18">
								<el-form-item :label-width="0">
									<el-input v-model="item.value"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="参数配置" name="params">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-card class="box-card" shadow="hover">
								<template v-slot:header>
									<div class="clearfix card-title">
										<span>路径参数</span>
										<div style="flex:1;"></div>
										<el-button style="float: right; padding: 3px 0" type="text"
											@click="addRow('params')">添加一行</el-button>
									</div>
								</template>
								<el-row :gutter="20" v-for="(item,index) in form.params" :key="index">
									<el-col :span="12">
										<el-form-item :label-width="0">
											<template v-slot:label>
												<i class="iconfont remove-btn"
													@click="removeRow('params', index)">&#xe788;</i>
											</template>
											<el-input v-model="item.key"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item :label-width="0">
											<el-input v-model="item.value"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card class="box-card" shadow="hover">
								<template v-slot:header>
									<div class="clearfix card-title">
										<span>body参数</span>
										<div style="flex:1;"></div>
										<el-button style="float: right; padding: 3px 0" type="text"
											@click="addRow('data')">
											添加一行</el-button>
									</div>
								</template>
								<el-row :gutter="20" v-for="(item,index) in form.data" :key="index">
									<el-col :span="12">
										<el-form-item :label-width="0">
											<template v-slot:label>
												<i class="iconfont remove-btn"
													@click="removeRow('data', index)">&#xe788;</i>
											</template>
											<el-input v-model="item.key"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item :label-width="0">
											<el-input v-model="item.value"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-card>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="响应" name="res">
					<el-input type="textarea" :rows="6" readonly disabled v-model="form.res">
					</el-input>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import axios from 'axios'

	let form = reactive({
			method: 'get',
			baseUrl: '',
			url: 'http://localhost:8080/GoldenControl/applet/appArticle/queryPage',
			header: [{
				key: 'Content-Type',
				value: 'application/x-www-form-urlencoded; charset=UTF-8'
			}],
			params: [],
			data: [],
			res: ''
		}),
		options = [{
			label: 'get',
			value: 'get'
		}, {
			label: 'post',
			value: 'post'
		}, {
			label: 'delete',
			value: 'delete'
		}, {
			label: 'put',
			value: 'put'
		}, {
			label: 'patch',
			value: 'patch'
		}],
		curTab = ref('header')
	const req = () => {
			const params = {}
			const data = {}
			const headers = {}
			form.params.forEach(item => {
				params[item.key] = item.value
			})
			form.data.forEach(item => {
				data[item.key] = item.value
			})
			form.header.forEach(item => {
				headers[item.key] = item.value
			})
			axios.request({
				url: form.url,
				method: form.method,
				headers,
				params,
				data
			}).then(res => {
				curTab.value = 'res'
				form.res = JSON.stringify(res)
				console.log(res)
			}).catch(err => {
				curTab.value = 'res'
				form.res = err.message
				if (err.response) {
					console.log(err.response.data);
					console.log(err.response.status);
					console.log(err.response.headers);
				} else if (err.request) {
					console.log(err.request);
				} else {
					console.log('Error', err.message);
				}
			})
		},
		addRow = (type) => {
			form[type].push({})
		},
		removeRow = (type, idx) => {
			form[type].splice(idx, 1)
		}
</script>

<style scoped>
	.box-card {
		margin-top: 20px;
	}

	.card-title {
		display: flex;
		align-items: center;
	}


	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.remove-btn {
		font-size: 2em;
		color: #F56C6C;
		vertical-align: middle;
		display: inline-block;
		cursor: pointer;
	}
</style>
